@import "common";
@mixin img{
    img{
        position: absolute;
        width: 50%;
        height: 50%;
        top:-9999px;
        bottom:-9999px;
        left:-9999px;
        right:-9999px;
        margin: auto;
    }
}
html,body{
    height: 100%;
}
            img{
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top: -999px;
                  left: -999px;
                  right: -999px;
                  bottom: -999px;
                  margin: auto;
               }
       .web{
            width: 100%;
            height: 100%;
            background: #bf0c21 url(../img/di.png) no-repeat;
            position: relative;
            font-size: 0;
            overflow: hidden;
          .cont{
              height: 100%;
              width: 100;
              position: relative;
              top: r(49);
              left: 50%;
              transform: translate(-50%);
              overflow: auto;
          .yuan{
              overflow: hidden;
              width: r(495);
              height: r(566);
              margin: 0 auto;
              position: absolute;
              top: 45%;
              left: 50%;
              transform: translate(-50%,-50%);
          .yuan_one{
              width: r(273);
              height: r(273);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(145);
              left: 50%;
              transform: translate(-50%);
              text-align: center;
              line-height: r(273);
              font-size: r(50);
              color: #bf0c21;
          }
          .yuan_two{
              width: r(107);
              height: r(107);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(15);
              left: 50%;
              transform: translate(-50%);
              @include img;
          }
          .yuan_theve{
              width: r(107);
              height: r(107);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(121);
              right: r(0);
              @include img;
          }
          .yuan_four{
              width: r(107);
              height: r(107);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(334);
              right: r(0);
              @include img;
          }
          .yuan_five{
              width: r(107);
              height: r(107);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(441);
              left: 50%;
              transform: translate(-50%);
              @include img;
          }
          .yuan_six{
              width: r(107);
              height: r(107);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(334);
              left: r(0);
              @include img;
          }
          .yuan_three{
              width: r(107);
              height: r(107);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(121);
              left: r(0);
              @include img;
          }
          .clear{
                clear: both;
            }
      }
      
     .rux{
         position: absolute;
         bottom: r(130);
         width: 100%;
         height: r(83);
         p{
             font-size: r(30);
             text-align: center;
             color: #e7c598;
         }
     }
     
    }    
    .tub{
              width: r(41);
              height: r(41);
              border-radius: 50%;
              position: absolute;
              bottom: r(25);
              right: r(56);
              img{
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top: -999px;
                  left: -999px;
                  right: -999px;
                  bottom: -999px;
                  margin: auto;
              }

          }
}
